/**
 * 日期选择器
 */
import React, { Component } from 'react';
import { DatePicker as AntdDatePicker } from 'antd-mobile-rn';
import {
  Text, View, TouchableOpacity
} from 'react-native';
import styleLib from '../styles';

const { inputStyle, inputPlaceHolder } = styleLib;
const { fontSize, color } = styleLib.inputText;
const CustomChildren = ({ extra, onClick, children }) => (
  <View style={inputStyle}>
    <TouchableOpacity style={{ flex: 1 }} onPress={onClick}>
      <View width={inputStyle.width} style={{ flex: 1, justifyContent: 'center' }}>
        <Text style={{ fontSize, color: extra === '请选择' ? inputPlaceHolder.color : color }}>
          {extra === '请选择' ? children : extra}
        </Text>
      </View>
    </TouchableOpacity>
    {/* <span style={{ float: 'right', color: '#888' }}>{extra}</span> */}
  </View>
);

export default class DatePicker extends Component {
  render() {
    const {
      maxDate, value, mode, onChange, format, minDate, title, placeholder
    } = this.props;
    return (
      <AntdDatePicker
        value={value}
        mode={mode}
        minDate={minDate}
        maxDate={maxDate}
        onChange={onChange}
        format={format}
        title={title}
      >
        <CustomChildren>{placeholder || '请选择'}</CustomChildren>
      </AntdDatePicker>
    );
  }
}
